/*** author: sailing date: 2018/10/23 ***/

<template>
	<div class="lifeContent" >
		<mu-paper :z-depth="1" class="demo-list-wrap">
			<mu-list textline="three-line">
				<mu-sub-header>类型</mu-sub-header>
				<div v-for="el in foods">
					<mu-divider></mu-divider>
					<mu-list-item
						style="height:60px;margin-top:5px"
						:ripple="false"
						button>
						<mu-list-item-action>
							<img
								style="width:100px;height:60px;"
								:src="el.images">
						</mu-list-item-action>
						<mu-list-item-content>
							<mu-list-item-title style="margin-left:10px;">{{
								el.name
							}}</mu-list-item-title>
						</mu-list-item-content>
						<mu-list-item-action>
							<mu-radio :value="el.name" v-model="selectName"></mu-radio>
						</mu-list-item-action>
					</mu-list-item>
				</div>
			</mu-list>
		</mu-paper>
		<br />
		<mu-paper :z-depth="1" class="demo-list-wrap">
			<mu-sub-header>时间</mu-sub-header>
			<mu-col span="12" lg="4" sm="6">
				<mu-date-input
					icon="today"
					v-model="dataTime"
					label="选择日期和时间"
					type="dateTime"
					value-format="YYYY-MM-DD HH:mm:ss"
					label-float
					full-width
					landscape
				></mu-date-input>
			</mu-col>
		</mu-paper>
		<br />
		<mu-paper :z-depth="1" class="demo-list-wrap">
			<mu-sub-header>速度</mu-sub-header>
			<mu-flex align-items="center" style="padding-bottom: 8px;padding-left:15px">
				<mu-radio
					style="margin-right: 16px;"
					value="较慢"
					v-model="speed"
					label="较慢"
				></mu-radio>
				<mu-radio
					style="margin-right: 16px;"
					value="普通"
					v-model="speed"
					label="普通"
				></mu-radio>
				<mu-radio
					style="margin-right: 16px;"
					value="较快"
					v-model="speed"
					label="较快"
				></mu-radio>
			</mu-flex>
		</mu-paper>
		<br />
		<mu-paper :z-depth="1" class="demo-list-wrap">
			<mu-sub-header>便量</mu-sub-header>
			<mu-flex align-items="center" style="padding-bottom: 8px;padding-left:15px">
				<mu-radio
					v-model="amount"
					style="margin-right: 16px;"
					value="少量"
					label="少量"
				></mu-radio>
				<mu-radio
					v-model="amount"
					style="margin-right: 16px;"
					value="中量"
					label="中量"
				></mu-radio>
				<mu-radio
					v-model="amount"
					style="margin-right: 16px;"
					value="大量"
					label="大量"
				></mu-radio>
			</mu-flex>
		</mu-paper>
		<mu-button style="margin-top: 20px;margin-bottom:10px;" color="secondary" @click="submit();">添加记录</mu-button>
	</div>
</template>

<script type="text/javascript">
import carouselImg1 from "../assets/images/carousel1.png";
import carouselImg2 from "../assets/images/carousel2.png";
import carouselImg3 from "../assets/images/carousel3.png";
import carouselImg4 from "../assets/images/carousel4.png";
import carouselImg5 from "../assets/images/carousel5.png";
import carouselImg6 from "../assets/images/carousel6.png";
import carouselImg7 from "../assets/images/carousel7.png";
import Config from "../server/Config.js";
//import lifeJson from "./lifeJson.js";
import fetch from "../server/fetch.js";
export default {
	data() {
		return {
			dataTime: "",
			left: 'top',
			speed: '较慢',
			amount: '少量',
			lifeWeight: 'left',
			
			selectName: '',
			loading:false,
			//foods: lifeJson,

			foods : [{
					name: "1类  (便秘)",
					select: true,
					text: "",
					images: carouselImg1
				},
				{
					name: "2类 (轻度便秘)",
					select: false,
					text: "",
					images: carouselImg2
				},
				{
					name: "3类 (良)",
					select: false,
					text: "",
					images: carouselImg3
				},
				{
					name: "4类 (优)",
					select: false,
					text: "",
					images: carouselImg4,
				},
				{
					name: "5类 (良)",
					select: false,
					text: "",
					images: carouselImg5
				},
				{
					name: "6类 (轻度腹泻)",
					select: false,
					text: "",
					images: carouselImg6
				},
				{
					name: "7类 (腹泻)",
					select: false,
					text: "",
					images: carouselImg7
				}
			]
		};
	},
	methods: {
		submit() {
			this.loading = true
			let postData = {
				title: "便便记录",
				user: Config.user,
				speed: this.speed,
				amount: this.amount,
				time: this.dataTime,
				data:this.selectName,
			}
			console.log('-------',postData)
			fetch.POST({
				path: "/regist",
				data: postData,
				callback: function(res) {
					console.log("sendmail",res);
				}
			});
		}
	}
};
</script>

<style lang="less">
.lifeContent {
	.demo-list-wrap {
		width: 100%;
		
		overflow: hidden;
	}
	.mu-sub-header {
		text-align: left;
	}
	.mu-list-three-line .mu-item {
		height: 60px;
	}
	.mu-item-action {
		min-width: 100px;
	}
	.mu-item {
		padding: 0 5px;
	}
	.ulstyle {
		.listyle {
			position: relative;
			.mu-carousel {
				height: 200px;
				margin-top: -20px;
			}
			img {
				min-width: 100%;
				width: 100%;
			}
			.bgtextbg {
				position: absolute;
				background: #000;
				width: 100%;
				bottom: 0;
				height: 40px;
				opacity: 0.5;
			}
			.bgtext {
				position: absolute;
				width: 100%;
				bottom: 0;
				text-align: left;
				color: #fff;
				height: 40px;
				line-height: 40px;
				margin-left: 20px;
			}
		}
		.textList {
			.textItem {
				min-height: 50px;
				line-height: 25px;
				-webkit-box-shadow: 1px 1px 1px #000;
				box-shadow: 0px 2px 4px #dddede;
				margin-top: 10px;
				text-align: left;
				display: -webkit-box;
				margin: 0 auto;
				margin-left: 10px;
				margin-right: 10px;

				.text {
					text-align: left;
				}
				img {
					height: 80px;
					margin-left: 5px;
				}
			}
		}
	}
}
</style>
